<template>
  <div>
    <a href="http://www.baidu.com" target="_blank" v-on:click.prevent>阻止跳转</a>
    <div
      @click="
        (e) => {
          console.log('div被点击了', e)
        }
      "
    >
      <button
        @click.stop="
          (e) => {
            console.log('按钮被点击了,阻止事件冒泡', e)
          }
        "
      >
        点击我,阻止事件冒泡
      </button>
      <button
        v-on:click="
          (e) => {
            console.log('按钮被点击了，事件冒泡', e)
          }
        "
      >
        点击我,按钮被点击了，事件冒泡
      </button>
    </div>

    <div
      @click.capture="
        (e) => {
          console.log('div被点击了,捕获', e)
        }
      "
      style="margin-top: 20px"
    >
      <button
        @click="
          (e) => {
            console.log('按钮被点击了,捕获', e)
          }
        "
      >
        点击我,捕获
      </button>
    </div>

    <div>
      <button
        @click.once="
          (e) => {
            console.log('只触发一次')
          }
        "
      >
        触发一次
      </button>
    </div>

    <div>
      <input
        type="text"
        @keydown.enter="
          (e) => {
            console.log('按下了回车键', e)
          }
        "
      />
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>
